<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
</head>
<body>
    <div id="app">
        <!-- 动态行内样式可以支持静态行内样式的写法  只不过要用小驼峰命名 -->
        <!-- <p :style="{opacity,color: 'pink',background:'blue',fontSize:'50px'}">你相信光吗</p>
        透明:<input type="text" placeholder="请输入值可以改文字透明" v-model="opacity"> -->

    <!-- v-bind绑定动态效果 -->
    <p :style="{opacity}">轻工水上漂</p>
        透明:<input type="text" v-model="opacity">
    </div>

    <script src="./js/vue.js"></script>
    <script>
       const vm = new Vue({
            data:{
                //定义一个数据
                opacity: 1,
            }
        });

        vm.$mount("#app");
    </script>
</body>
</html>